<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #box{
            width:100px;
            height:100px;
            background-color:#f90;
            border:1px solid #000;
            position:absolute;
            left:100px;
            top:100px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
    <script>
        var box = document.getElementById("box");

        //按住
        box.onmousedown = function(env){

            var env = env||window.event;

            box.style.backgroundColor="#09f";

            //获得鼠标相对于触发事件的相对位置
            var left = env.offsetX;

            var top = env.offsetY;
            //绑定移动事件
            document.onmousemove = function(en){

                var en = en||window.event;

                //计算出相对位置
                box.style.left = en.x-left+"px";

                box.style.top = en.y - top+"px";
            }

        }

        document.onmouseup = function(){

            box.style.backgroundColor = "";
            //接触鼠标移动事件绑定
            document.onmousemove = null;
        }
    </script>
</html>